<template>
	<div id="tmpl">
		<!-- 1.0 商品轮播图 -->
		<div class="slider">
			<silder :imgs='imgs'></silder>
		</div>	

		<!-- 2.0 实现商品购买区 -->
		<div class="buy">
			<h3>华为10 pro旗舰机全新上线</h3>
			<p class='line'></p>
			<ul>
				<li class='price'>市场价:<s>￥2199</s>&nbsp;&nbsp;&nbsp;销售价:<span>￥2099</span></li>
				<li class='inputlis'>购买数量:
					<inputnumber v-on:dataobj="getcount" class='inputnum'></inputnumber>
					<transition name='show' @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
						<div class='ball' v-if='isshow'></div>
					</transition>
				</li>
				<li>
					<mt-button type='primary' size='small'>立即购买</mt-button>
					<mt-button type='danger' size='small'  v-on:click="toshopcar">加入购物车</mt-button>						
				</li>								
			</ul>
		</div>
		<!-- 3.0 图文详情 -->
		<div id='params'>
			<h6>商品参数</h6>
			<p class='line'></p>
			<ul>
				<li>商品货号:</li>
				<li>库存情况:</li>
				<li>上架时间:</li>
			</ul>
		</div>
		<!-- 4.0 商品评论 -->
		<div id='other'>
			<router-link v-bind="{to:'/goods/goodsdesc/'+id}">
				<mt-button class='imgdesc' type='primary' size='large'>图文详情</mt-button>
		    </router-link>
		    <router-link v-bind="{to:'/goods/goodscomment/'+id}">
				<mt-button type='danger' size='large'>商品评论</mt-button>
		    </router-link>
		</div>
	</div>
</template>

<script>
	import silder from '../subcom/silder.vue';
	import inputnumber from '../subcom/inputNumber.vue';
	// 使用vm对象
	import {vm,COUNTSTR} from '../../kits/vm.js';
	import {setItem,valueObj} from '../../kits/localSg.js';

	export default{
		components:{
			silder,inputnumber
		},
		data(){
			return {
				isshow:false,
				inputNumberCount:1,
				id : 0,  //表示商品id
				imgs:[{
					'img':'http://img11.360buyimg.com/n1/s450x450_jfs/t3076/42/8593902551/206108/fdb1a60f/58c60fc3Nf9faa2fa.jpg'
				},{
					'img':'//m.360buyimg.com/mobilecms/s750x750_jfs/t3265/227/8578960548/277044/5b465394/58c60fedNb8964552.jpg!q80.dpg'
				}]	
			}
		},
		created(){
//			获取url传入的商品id值
			this.id = this.$route.params.id;
		},
		methods:{
			beforeEnter(el){
				el.style.transform='translate(0,0)'
			},
			enter(el,done){
				el.offsetWidth;

				el.style.transform='translate(65px,365px)';

				done();
			},
			afterEnter(el){
				//重置小球的初始状态
				this.isshow =! this.isshow;
			},
			toshopcar(){
//				1.0触发事件
				vm.$emit(COUNTSTR,this.inputNumberCount);
				// 2.0 将数据保存到loaclStorage中去
				valueObj.goodsid=this.id;
				valueObj.count=this.inputNumberCount;
				setItem(valueObj)
				// 3.0实现小球动画
				this.isshow=!this.isshow;
			},
			getcount(count){
				this.inputNumberCount=count;
			}
		}
	}

</script>

<style scoped>
	.slider{
		border:1px solid rgba(0,0,0,0.2);
		border-radius:5px;
		margin:5px;
	}
	.slider img{
		width:100%;
		height: 100%
	}
	.buy{
		border:1px solid rgba(0,0,0,0.2);
		border-radius:5px;
		margin:5px;
		padding-top:10px;	
	}
	.line{
		width:95%;
		border:1px solid rgba(0,0,0,0.1);
		margin:0 auto;
	}
	.buy h3{
		color:rgb(38,162,255);
		padding-left: 10px;
		padding-bottom:5px;
	}
	#tmpl ul li{
		list-style-type:none;
		margin-bottom: 10px;
	}
	#tmpl ul {
		padding-left: 10px;
	}
	.price span{
		color:red;
	}
	#params{
		border:1px solid rgba(0,0,0,0.2);
		border-radius:5px;
		margin:5px;
		padding-top:10px;			
	}
	#params h6{
		padding-left: 10px;
		padding-bottom:5px;
	}
	#other{
		border:1px solid rgba(0,0,0,0.2);
		border-radius:5px;
		margin:5px;
		padding:5px;
	}
	#other .imgdesc{
		margin-bottom:10px;
	}
	.inputlis{
		position: relative;
		line-height: 40px;
	}
	.inputnum{
		position: absolute;
		left: 100px;
		top:0px;
	}
	.ball{
		z-index: 100;
		background-color:red;
		width: 20px;
		height:20px;
		border-radius: 50%;
		position:absolute;
		left:155px;
		top:8px;
		transition:all 0.4s ease;
	}
</style>